<template>
	<view class="tabbar">
		<view class="item" v-for="(item,index) in list" :key="index" @tap="navTo(index,item.pagePath)">
			<image class="img" :src="current == index ? item.selectedIconPath : item.iconPath" mode=""></image>
			<view class="text" :class="{selected:current == index}">
				<text>{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"myTabbar",
		props:{
			current:Number
		},
		data() {
			return {
				list:[{
							"pagePath": "/pages/shop/pages/tabbar/home/index",
							"iconPath": require("@/static/tabbar/home.png"),
							"selectedIconPath": require("@/static/tabbar/home-s.png"),
							"text": "首页"
						},
						{
							"pagePath": "/pages/shop/pages/tabbar/category/category",
							"iconPath": require("@/static/tabbar/category.png"),
							"selectedIconPath": require("@/static/tabbar/category-s.png"),
							"text": "分类"
						},
					
						{
							"pagePath": "/pages/shop/pages/tabbar/cart/cartList",
							"iconPath": require("@/static/tabbar/cart.png"),
							"selectedIconPath": require("@/static/tabbar/cart-s.png"),
							"text": "购物车"
						},
						{
							"pagePath": "/pages/shop/pages/tabbar/user/my",
							"iconPath": require("@/static/tabbar/mine.png"),
							"selectedIconPath": require("@/static/tabbar/mine-s.png"),
							"text": "我的"
						}
					]
			};
		},
		methods:{
			navTo(index,path){
				console.log(path);
				console.log(path.split("/").indexOf("index"));
				if(path.split("/").indexOf("index") != -1){
					uni.switchTab({
						url:path
					})
				}else{
					uni.navigateTo({
						url:path
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.tabbar{
		padding: 48rpx 20rpx 18rpx;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		position: fixed;
		top: calc(100vh - 132rpx);
		z-index: 100;
		.item{
			padding: 0 56rpx;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			.img{
				width: 38rpx;
				height: 38rpx;
			}
			.text{
				width: 100%;
				font-size: 24rpx;
				text-align: center;
			}
		}
		.selected{
			color: #E64D4E;
		}
	}
</style>